<template>
	<view class="container">
		<view class="vip-container">
			<view class="vip-container-border" v-for="(item, index) in vipList" :key="index" @click="clickItem(item.LevelId)">
				<view class="sa-sell">
					<view class="sa-sell-border"><view class="sa-sell-img" :style="{ backgroundImage: 'url( ' + item.LevelImage + ' )' }"></view></view>
					<view class="sa-sell-bottom-card">
						<view class="sa-sell-name">{{ item.LevelName }}</view>
						<view class="sa-sell-price-container">
							<view>
								<text class="unit">￥</text>
								<text class="price">{{ item.LevelValue }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 		<view class="vip-container-border" v-for="(item,index) in vipList" :key="index"  @click="clickItem(item.LevelId)">
				<view class="vip-item">
					<image class="vip-item-img" :src="item.LevelImage"></image>
					<text class="vip-item-title">{{item.LevelName}}</text>
				</view>
				<view class="vip-bottom-container">
					<image class="vip-bottom-icon"  src="../../static/images/greenery-tab.png"></image>
					<view style="position: absolute;z-index: 1;display: flex;align-items: center;justify-content: center;">
						<text class="vip-item-unit">¥</text>
						<text class="vip-item-cost">{{item.LevelValue}}</text>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import { getVipLevelInfoList } from '@/constant/vip.js';
export default {
	data() {
		return {
			vipList: [],
			query_filter: {
				keyword: '',
				pageIndex: 0,
				pageSize: 10
			}
		};
	},
	onLoad() {
		this.searchVipList();
	},
	onReachBottom() {
		this.query_filter.pageIndex++;
		this.searchVipList();
	},
	onPullDownRefresh() {
		this.query_filter.pageIndex = 0;
		this.searchVipList();
	},
	methods: {
		async searchVipList() {
			//vip列表
			let res = await getVipLevelInfoList(this.query_filter);
			if (this.query_filter.pageIndex > 0) {
				for (let i = 0; i < res.Source.length; i++) {
					let obj = res.Source[i];
					this.vipList.push(obj);
				}
			} else {
				this.vipList = res.Source;
			}
		},
		clickItem(item) {
			uni.navigateTo({
				url: './detail/index?levelId=' + item
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	padding-bottom: 40rpx;
	overflow-y: auto;
	.vip-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
	}
}

.vip-container-border {
	width: calc(50% - 12rpx);
	margin-bottom: 20rpx;

	.sa-sell {
		position: relative;
		width: 100%;
		height: 458rpx;
		border-radius: 20rpx;
		box-shadow: 0rpx 4rpx 8rpx rgba(68, 68, 68, 0.16);
		margin-right: 20rpx;
		background-color: #ffffff;
		.sa-sell-border {
			width: 100%;
			height: 298rpx;
		}
		&-img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx 20rpx 0 0;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}

		.sa-sell-bottom-card {
		    padding-left: 16rpx;
		    padding-top: 20rpx;
			color: $main-text-color-gray-33;

			.sa-sell-name {
				font-size: $main-text-size-30;
				font-family: 'SourceHanSansCN-Medium';
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 94%;
			}

			.sa-sell-price-container {
				display: flex;
				margin-top: 20rpx;
				font-family: 'SourceHanSansCN-Regular';
				align-items: baseline;
				.unit {
					color: $main-text-color-main-orange;
					font-size: $main-text-size-24;
				}
				.price {
					color: $main-text-color-main-orange;
					font-size: $main-text-size-40;
					font-family: 'SourceHanSansCN-Medium';
				}
				.orginal-price {
					margin-left: 10rpx;
					color: $main-text-color-grey;
					font-size: $main-text-size-24;
					text-decoration: line-through;
				}
			}
		}
	}
}
</style>
